<template>
	<div class="madp-add-tag">
		<div>
			<div class="madp-tag-title">
				<p>
					<span class="madp-tag-title-line">|</span>
					<span class="madp-tag-title-name">企业标签</span>
				</p>
				<el-button plain icon="el-icon-plus" class="madp-add-tag-btn" @click="addEnterpriseTagFn">添加</el-button>
			</div>

			<div v-for="(item, index) in enterpriseTagList" :key="index">
				<div v-if="Array.isArray(item.tagNameList) && item.tagNameList.length > 0">
					<p>{{ item.groupName }}</p>
					<el-tag class="madp-tag-name" :key="tag.name" v-for="(tag, tagIndex) in item.tagNameList" closable :disable-transitions="false" @close="enterpriseTagDeleteFn(tag, tagIndex)">{{
						tag.name
					}}</el-tag>
				</div>
			</div>
		</div>
		<div>
			<div>
				<div class="madp-tag-title madp-tag-title-personal">
					<p>
						<span class="madp-tag-title-line">|</span>
						<span class="madp-tag-title-name">个人标签</span>
					</p>
					<el-button plain icon="el-icon-plus" class="madp-add-tag-btn" @click="addPersonalTagFn">添加</el-button>
				</div>
				<el-tag class="madp-tag-name" :key="personalTag.tagName" v-for="personalTag in personalTagList" closable :disable-transitions="false" @close="personalTagDeleteFn(personalTag)">{{
					personalTag.tagName
				}}</el-tag>
			</div>
		</div>
		<el-dialog :title="dialogShow === 1 ? '添加企业标签' : '添加个人标签'" :visible.sync="dialogShowNew" width="100%" :before-close="dialogCencelFn" :close-on-click-modal="false">
			<!-- 企业标签 -->
			<div class="madp-tag-content" v-if="dialogShow === 1">
				<div v-for="(allItem, allIndex) in allEnterpriseTagList" :key="allIndex">
					<div v-if="Array.isArray(allItem.tagNameList) && allItem.tagNameList.length > 0">
						<p>{{ allItem.groupName }}</p>
						<el-tag
							:key="allTag.name"
							v-for="(allTag, allTagIndex) in allItem.tagNameList"
							:class="[allTag.show ? 'madp-tag-name-color' : 'madp-tag-name']"
							:disable-transitions="false"
							@click="allTagFn(allItem, allIndex, allTag, allTagIndex)"
							>{{ allTag.name }}</el-tag
						>
					</div>
				</div>
			</div>
			<!-- 个人标签 -->
			<div class="madp-tag-content" v-if="dialogShow === 2">
				<el-button type="primary" icon="el-icon-plus" class="madp-add-personal-btn" @click="addPersonalTagDialogFn">添加</el-button>
				<el-input
					class="madp-input-new-tag"
					placeholder="输入后回车"
					v-if="addBtnDialogShow"
					v-model.trim="personalValue"
					ref="saveTagInput"
					@keyup.enter.native="handleInputConfirm"
					@blur="handleInputConfirm"
				></el-input>
				<el-tag
					:class="[allPersonalTag.show ? 'madp-tag-name-color' : 'madp-tag-name']"
					:key="allPersonalTag.tagName"
					v-for="(allPersonalTag, allPersonalTagIndex) in allPersonalTagList"
					closable
					:disable-transitions="false"
					@close="allPersonalTagDeleteFn(allPersonalTag)"
					@click="allPersonalTagFn(allPersonalTag, allPersonalTagIndex)"
					>{{ allPersonalTag.tagName }}</el-tag
				>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogCencelFn">取消</el-button>
				<el-button type="primary" class="madp-dialog-btn" @click="dialogSaveFn">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	allEnterpriseLabels,
	personalBindingEnterpriseLabel,
	personalBindingEnterpriseLabelSave,
	addPersonalLabels,
	allPersonalAllLabels,
	personalTabSelected,
	deletePersonalAllTab,
	personalTabSelectedSave,
	deletePersonalTabSelected,
	deletePersonalBindingEnterpriseLabel,
} from '@/api/customer-details';
export default {
	props: {
		wxUserId: {
			type: String,
			default: '',
		},
		wxExternalUserid: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			addBtnDialogShow: false,
			personalValue: '',
			// 选中企业标签
			enterpriseTagList: [],
			//个人已绑定标签
			personalTagList: [],
			//个人所有标签
			allPersonalTagList: [],
			//所有企业标签
			allEnterpriseTagList: [],
			dialogShow: -1, //1是企业标签 2是个人标签
		};
	},
	computed: {
		dialogShowNew() {
			if (this.dialogShow === 1 || this.dialogShow === 2) {
				return true;
			} else {
				return false;
			}
		},
	},
	created() {
		this.allEnterpriseLabelsFn();
		this.personalBindingEnterpriseLabelFn();
		this.allPersonalAllLabelsFn();
		this.personalTabSelectedFn();
	},
	methods: {
		// 选中企业标签删除
		enterpriseTagDeleteFn(tag, tagIndex) {
			this.deletePersonalBindingEnterpriseLabelFn(tag);
		},
		//选中企业标签添加
		addEnterpriseTagFn() {
			this.dialogShow = 1;
			this.allEnterpriseTagEchoFn();
		},
		//个人标签删除
		personalTagDeleteFn(personalTag) {
			this.deletePersonalTabSelectedFn(personalTag.id);
		},
		allPersonalTagDeleteFn(allPersonalTag) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.deletePersonalAllTabFn(allPersonalTag.id);
				})
				.catch(() => {});
		},
		//个人标签添加
		addPersonalTagFn() {
			this.dialogShow = 2;
		},
		//取消
		dialogCencelFn() {
			this.dialogShow = -1;
		},
		//保存
		dialogSaveFn() {
			if (this.dialogShow === 1) {
				this.personalBindingEnterpriseLabelSaveFn();
			} else if (this.dialogShow === 2) {
				this.personalTabSelectedSaveFn();
			}
		},
		//所有企业标签
		allTagFn(allItem, allIndex, allTag, allTagIndex) {
			this.$forceUpdate();
			allTag.show = !allTag.show;
		},
		//企业标签回显
		allEnterpriseTagEchoFn() {
			this.allEnterpriseTagList.map((allItem) => {
				allItem.tagNameList.map((item) => {
					item.show = false;
				});
				this.enterpriseTagList.map((allSelectItem) => {
					if (allSelectItem.groupId === allItem.groupId && Array.isArray(allSelectItem.tagNameList) && allSelectItem.tagNameList.length > 0) {
						allItem.tagNameList.map((item) => {
							allSelectItem.tagNameList.map((selectItem) => {
								if (item.wxContactTagId === selectItem.wxContactTagId) {
									item.show = true;
								}
							});
						});
					}
				});
			});
		},
		//弹框个人标签
		addPersonalTagDialogFn() {
			this.addBtnDialogShow = true;
		},
		// 个人标签输入添加
		handleInputConfirm() {
			let personalValue = this.personalValue;
			if (personalValue) {
				this.addPersonalLabelsFn(personalValue);
			}
			this.addBtnDialogShow = false;
			this.personalValue = '';
		},
		// 个人标签回显
		allPersonalTagEchoFn() {
			for (let i = 0; i < this.allPersonalTagList.length; i++) {
				let allItem = this.allPersonalTagList[i];
				allItem.show = false;
				for (let j = 0; j < this.personalTagList.length; j++) {
					let item = this.personalTagList[j];
					if (item.id === allItem.id) {
						allItem.show = true;
					}
				}
			}
		},
		//所有个人标签
		allPersonalTagFn(allPersonalTag, allPersonalTagIndex) {
			this.$forceUpdate();
			allPersonalTag.show = !allPersonalTag.show;
		},
		// 所有企业标签
		allEnterpriseLabelsFn() {
			allEnterpriseLabels().then((res) => {
				if (res.data.code === 0) {
					this.allEnterpriseTagList = res.data.data;
				}
			});
		},
		// 查询个人绑定企业标签列表
		personalBindingEnterpriseLabelFn() {
			let obj = {
				wxExternalUserid: this.wxExternalUserid, //客户id
				wxUserId: this.wxUserId, //用户id
			};
			personalBindingEnterpriseLabel(obj).then((res) => {
				if (res.data.code === 0) {
					this.enterpriseTagList = res.data.data;
				}
			});
		},
		//删除个人绑定企业标签
		deletePersonalBindingEnterpriseLabelFn(item) {
			let obj = {
				id: item.id,
				wxExternalUserid: this.wxExternalUserid, //客户id
				wxUserId: this.wxUserId, //用户id
			};
			deletePersonalBindingEnterpriseLabel(obj).then((res) => {
				if (res.data.code === 0) {
					this.personalBindingEnterpriseLabelFn();
				}
			});
		},
		// 个人绑定企业标签保存
		personalBindingEnterpriseLabelSaveFn() {
			let arr = [],
				arrId = [];
			this.allEnterpriseTagList.map((allItem) => {
				let allIGrouptem = JSON.parse(JSON.stringify(allItem));
				allIGrouptem.tagNameList.map((item) => {
					if (item.show) {
						let exitIndex = arrId.indexOf(allIGrouptem.groupId);
						if (exitIndex > -1) {
							arr[exitIndex].tagNameList.push(item);
						} else {
							arrId.push(allItem.groupId);
							arr.push(
								Object.assign(allIGrouptem, {
									tagNameList: [item],
								}),
							);
						}
					}
				});
			});
			let obj = {
				wxUserId: this.wxUserId, //用户id
				wxExternalUserid: this.wxExternalUserid, //客户id
				wxList: arr,
			};
			personalBindingEnterpriseLabelSave(obj).then((res) => {
				if (res.data.code === 0) {
					this.personalBindingEnterpriseLabelFn();
					this.dialogShow = -1;
				}
			});
		},
		// 添加个人标签
		addPersonalLabelsFn(tagName) {
			let obj = {
				tagName: tagName,
				wxUserId: this.wxUserId, //用户id
				wxExternalUserid: this.wxExternalUserid, //客户id
			};
			addPersonalLabels(obj).then((res) => {
				if (res.data.code === 0) {
					this.$message.success('标签添加成功');
					this.allPersonalTagList.unshift(Object.assign(res.data.data, { show: true }));
				}
			});
		},
		// 查询所有个人标签
		allPersonalAllLabelsFn() {
			let obj = {
				wxUserId: this.wxUserId, //用户id
				wxExternalUserid: this.wxExternalUserid, //客户id
			};
			allPersonalAllLabels(obj).then((res) => {
				if (res.data.code === 0) {
					this.allPersonalTagList = res.data.data;
					this.allPersonalTagEchoFn();
				}
			});
		},
		// 个人已选中标签
		personalTabSelectedFn() {
			let obj = {
				wxUserId: this.wxUserId, //用户id
				wxExternalUserid: this.wxExternalUserid, //客户id
			};
			personalTabSelected(obj).then((res) => {
				if (res.data.code === 0) {
					this.$nextTick(() => {
						this.personalTagList = res.data.data;
						this.allPersonalTagEchoFn();
					});
				}
			});
		},
		// 个人所有标签删除
		deletePersonalAllTabFn(id) {
			deletePersonalAllTab(id).then((res) => {
				if (res.data.code === 0) {
					this.$message.success('标签删除成功');
					this.allPersonalAllLabelsFn();
					this.personalTabSelectedFn();
				}
			});
		},
		// 保存个人选中标签
		personalTabSelectedSaveFn() {
			let arr = [];
			for (let i = 0; i < this.allPersonalTagList.length; i++) {
				if (this.allPersonalTagList[i].show) {
					arr.push(this.allPersonalTagList[i].id);
				}
			}
			let obj = {
				wxUserId: this.wxUserId, //用户id
				wxExternalUserid: this.wxExternalUserid, //客户id
				ids: arr,
			};
			personalTabSelectedSave(obj).then((res) => {
				if (res.data.code === 0) {
					this.dialogShow = -1;
					this.personalTabSelectedFn();
					this.allPersonalAllLabelsFn();
				}
			});
		},
		deletePersonalTabSelectedFn(id) {
			let obj = {
				id: id,
			};
			deletePersonalTabSelected(obj).then((res) => {
				if (res.data.code === 0) {
					this.$message.success('已取消该标签');
					this.personalTabSelectedFn();
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.madp-tag-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.madp-tag-title-line {
		width: 2px;
		background-color: #1890ff;
		margin-right: 5px;
	}
	.madp-tag-title-name {
		display: inline-block;
		width: 25vw;
		font-weight: 600;
	}
	.madp-add-tag-btn {
		font-size: 12px;
		padding: 8px 10px;
	}
}
.madp-tag-name {
	background-color: #ecf2f9;
	border: 1px solid #cde8ff;
	color: #696969;
	margin: 0px 10px 6px 0px !important;
	/deep/ .el-icon-close {
		color: #696969;
	}
}
.madp-tag-name:hover {
	cursor: pointer;
}
.madp-tag-name-color:hover {
	cursor: pointer;
}
/deep/ .el-dialog {
	position: absolute;
	bottom: 0;
	width: 100% !important;
	margin: 0 auto;
}
.madp-tag-content {
	padding: 0 10px;
}
.madp-tag-name-color {
	margin-right: 10px;
	background-color: #409eff;
	color: #fff;
	/deep/.el-icon-close {
		color: #fff;
	}
}
.madp-add-personal-btn {
	font-size: 12px;
	margin-right: 10px;
	background: #409eff !important;
	padding: 8px 10px;
	border: 1px solid #409eff !important;
}
.madp-input-new-tag {
	width: 100px;
	margin-right: 10px;
}
.madp-tag-title-personal {
	margin-bottom: 10px;
}
/deep/.madp-dialog-btn {
	background: #1890ff !important;
	border: 1px solid #1890ff !important;
}
</style>
